<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/js/vue.js"></script>
    <style></style>
</head>
<body>
    <div id="app">
        <div>
            <div>
                <label>学号</label>
                <input type="text" v-model="editStudent.stuId">
            </div>
            <div>
                <label>姓名</label>
                <input type="text" v-model="editStudent.name">
            </div>
            <div>
                <label>性别</label>
                <input type="radio" value="男" v-model="editStudent.sex">男
                <input type="radio" value="女" v-model="editStudent.sex">女
            </div>
            <div>
                <label>语文</label>
                <input type="text" v-model="editStudent.chinese">
            </div>
            <div>
                <label>数学</label>
                <input type="text" v-model="editStudent.math">
            </div>
            <div>
                <label>英语</label>
                <input type="text" v-model="editStudent.english">
            </div>
            <div>
                <button v-if="!flag" @click="add">提交</button>
                <button v-if="flag" @click="save">保存</button>
            </div>
        </div>
        <div>
            <table border="1">
                <tr>
                    <td>序号</td>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>语文</td>
                    <td>数学</td>
                    <td>英语</td>
                    <td>总分</td>
                    <td>平均分</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(stu, i) in student" :key="stu.id">
                    <td>{{stu.id}}</td>
                    <td>{{stu.stuId}}</td>
                    <td>{{stu.name}}</td>
                    <td>{{stu.sex}}</td>
                    <td>{{stu.chinese}}</td>
                    <td>{{stu.math}}</td>
                    <td>{{stu.english}}</td>
                    <td>{{stu.zong}}</td>
                    <td>{{stu.average}}</td>
                    <td>
                        <a href="#" @click="update(stu.id)">修改</a>
                        <a href="#" @click.prevent="del(i)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,//修改的标志
                editStudent: {},//要修改的学生的信息
                student: [
                    { id: "1", stuId: 189000101, name: "张三", sex: "男", chinese: 124, math: 102, english: 90, zong: 316, average: 105.3 },
                    { id: "2", stuId: 189000101, name: "李四", sex: "男", chinese: 124, math: 102, english: 90, zong: 316, average: 105.3 },
                ]
            },
            methods: {
                del(i) {
                    this.student.splice(i, 1);
                },
                add() {
                        //新增
                        this.student.push({
                            id: this.student.length + 1,
                            stuId: this.editStudent.stuId,
                            name: this.editStudent.name,
                            sex: this.editStudent.sex,
                            chinese: this.editStudent.chinese,
                            math: this.editStudent.math,
                            english: this.editStudent.english,
                            zong: parseInt(this.editStudent.chinese) + parseInt(this.editStudent.math) + parseInt(this.editStudent.english),
                            average: ((parseInt(this.editStudent.chinese) + parseInt(this.editStudent.math) + parseInt(this.editStudent.english)) / 3).toFixed(1)
                        });
                        //清空输入框
                        this.editStudent = {};
                    },
                update(id) {
                    //修改
                    //根据id找到要修改的学生对象
                    var stu = this.student.find(function (item) {
                        return item.id == id;
                    });
                    //把要修改的学生对象赋值给editStudent
                    this.$set(this, 'editStudent', stu);
                    //修改标志为true
                    this.flag = true;
                },
                save() {
                    //保存
                    //根据editStudent的id找到要修改的学生对象
                    var stu = this.student.find(function (item) {
                        return item.id == this.editStudent.id;
                    }.bind(this));
                    //把editStudent的属性复制给要修改的学生对象
                    Object.assign(stu, this.editStudent);
                    //修改标志为false
                    this.flag = false;
                    //清空输入框
                    this.editStudent = {};
                }
            }
        });
    </script>
</body>
</html>
